<template>
    <div class="bg-white px-3" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
        <!-- 标签页的内容 -->
        <!-- 高级搜索-->
        <button-search class="pt-3">
            <template #right>
                <div class="d-flex align-items-center">
                    <el-date-picker size='middle' v-model='search.time' type='daterange' range-separator='至' start-placeholder='开始日期' end-placeholder='结束日期'>
                    </el-date-picker>
                    <el-input v-model='search.keyword' placeholder='请输入订单号' class="mx-3"> </el-input>
                    <el-button type='info' size='middle'>搜索</el-button>
                </div>
            </template>
        </button-search>

        <!-- 商品列表 -->
        <el-table :data="tableData" style="margin-top: 20px; background-color: antiquewhite; border:1px"
            @selection-change="handleSelectionChange">
            <!-- 添加顶部间距 -->
            <el-table-column type="selection" width="45" style="position: flex; align-items: center;" />
            <el-table-column label="商品信息" prop="id" align="center">
            </el-table-column>
          
            <el-table-column prop="username" label="商品清单" align="center">
            </el-table-column>
      
            <el-table-column prop="price" label="订单金额" align="center" width="150">
            </el-table-column>

            <el-table-column prop="price" label="收货信息" align="center" width="150">
            </el-table-column>

            <el-table-column prop="content" label="买家" align="center" width="150">
            </el-table-column>

            <el-table-column prop="code" label="交易状态" align="center" width="150">
            </el-table-column>

            <el-table-column prop="create_time" label="创建时间" align="center" width="150">
            </el-table-column>

            <el-table-column prop="price" label="操作" align="center" width="150">
                <template slot-scope="scope">
                    <!-- slot-scope="scope"创建了一个名为scope的新作用域，
                             它包含了子组件传递给插槽的所有数据。然后我们可以使用v-for指令来遍历scope.items。 -->
                    <el-button-group>
                       
                        
                        <el-button type="danger" size="mini" plain @click="delItem(scope.$index)">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <!-- 底部 -->
        <div style="height: 60px;">
            <el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white"
                style="bottom:0;left: 200px;right: 0; z-index: 100;">
                <!-- flex:1占剩余的所有空间 -->
                <div style="flex: 1;">
                    <el-pagination :current-change="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </div>
            </el-footer>
        </div>
    </div>
</template>
<script>
import buttonSearch from '@/components/common/button-search.vue';

export default {
    name: 'afterSaleList',
    components: { buttonSearch },
    data() {
        return {
            form: {
                name: '',
                order: 50,
                status: 1,
                sku_list: [],
            },
            multipleSelection: [],
            currentPage: 1,
            tableData:[],
            search:{
                time:'',
                keywords:'',
            }
        };
    },
    created() {

    },
    methods: {

        // 用来加载数据，监听点的是哪一个tab
        handleClick() {
            // console.log(this.activeName);
        },
        // 选中     
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 删除当前商品
        delItem(scope) {
            this.$confirm('是否要删除该规格?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tableData.splice(scope, 1)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
        },
        // 修改状态
        changeStatus(item) {
            // 请求服务端修改状态代码：

            // 修改前端
            item.status = !item.status
            this.$message({
                message: item.status ? '启用成功' : '禁用成功',
                type: 'success',
                duration: 2000
            })
        },
        onSubmit() {
            console.log('submit!');
        },
    },
};
</script>
<style scoped>
.skuListItem>i {
    display: none;
}

.skuListItem:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

.skuListItem:hover>font {
    display: none;
}

.skuListItem:hover>i {
    display: inline-block;
}
</style>